<template>
  <el-splitter>
    <el-splitter-panel collapsible min="50">
      <div class="full grid-box">
        <div v-for="(schema, elementName) in schemas" class="item-box" :class="{selected: element === elementName}" @click="toggle(elementName, schema)">
          <div class="flex-center">
            <img :src="schema.preview" class="preview" />
          </div>
          <div class="component-name flex-center">{{ elementName }}</div>
        </div>
      </div>
    </el-splitter-panel>
    <el-splitter-panel size="25%" collapsible min="50">
      <div v-if="element" class="full property-box">
        <div class="flex items-center pl5px bg-yellow">【{{element}}】属性</div>
        <div class="p5px">
          <!-- <PropsEditor v-if="element" :type="props.type" :element="props.element" v-model="elementProps" /> -->
          <component :is="propEditor" v-model="elementProps" />
        </div>
      </div>
    </el-splitter-panel>
  </el-splitter>
</template>
<script setup lang="ts">
  import { ElSplitter, ElSplitterPanel } from 'element-plus';
  import { computed, ref, watch, watchEffect } from 'vue';
  import { ElementType } from '@/views/types';
  import { elementSchemas } from '..';
  import elements from './props'

  const props = defineProps<{type: ElementType, element?: string, elementProps?: Record<string, any>}>()  
  const emits = defineEmits(['update:element', 'update:elementProps'])

  const element = ref(props.element)
  const elementProps = ref(props.elementProps)
  const schemas = computed((): Record<string, any> => {
    const elementType = props.type
    if(!elementType) return {}

    return elementSchemas[elementType] || {}
  })

  const schema = ref<{label: string, comment: string, props: Record<string, any>}>()
  function toggle(name, value) {
    schema.value = value
    element.value = element.value && element.value === name ? void 0 : name
  }

  const propEditor = computed(() => elements[props.type]?.[props.element]?.component)

  watchEffect(() => emits('update:element', element.value))
  watch(() => props.element, (val) => element.value = val)

  watchEffect(() => emits('update:elementProps', elementProps.value))
  watch(() => props.elementProps, (val) => elementProps.value = val, {deep: true})
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 200px;
    gap: 15px;
  }
  .item-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 35px;
    border: 1px solid var(--el-border-color);
    cursor: pointer;
  }
  .component-name {
    border-top: 1px solid var(--el-border-color);
  }
  .selected {
    border: 1px solid var(--el-color-primary);
  }
  .property-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 35px minmax(0, 1fr);
  }
  .preview {
    max-width: 100%;
    max-height: 100%;
  }
</style>